<!-- 申请业务关系代码 -->
<template>
    <div class="applyAgrNo">
        <x-header v-show="!isWeChar">
            <div slot="default" class="common__header--title">申请业务关系代码</div>
            <div @click="goBack" slot="overwrite-left" class="common__header--img">
                <img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back">
            </div>
        </x-header>
        <div class="row_up">
            <group>
                <!-- 申请类型选择 -->
                <selector class="selects" placeholder="请选择申请类型" v-model="applyType" :options="listAapplyType"></selector>
            </group>
            <div class="row_up_area">
                <!-- <img v-show="typeof (residentArea) != 'undefined' && residentArea != null && residentArea.length == 0" alt="图片" src="~assets/x3/ico/icon-addre.png" /> -->
                <div v-show="typeof (residentArea) != 'undefined' && residentArea != null && residentArea.length == 0" class="remarks">
                    <div class="title">请选择常驻地区</div>
                    <div>我们将按照常驻地区信息分配服务机构</div>
                </div>
                <!-- 常驻地区选择 -->
                <selector class="areaSelects" v-model="residentArea" :options="shop.hotAreaList" @on-change="onChangeSelector"></selector>
            </div>
        </div>
        <!-- button -->
        <div class="row_submit" @click="subForm">
            <x-button type="primary">保存</x-button>
        </div>
        <div class="row_applyAgrNo_remarks">
            <h4>业务关系代码说明</h4>
            <p>1、普通用户：无需申请业务关系代码，即可领取积分并在商城进行消费。</p>
            <p>2、认证用户（保险中介机构/非保险中介机构/个人代理人）：需申请佣金/非佣金类业务关系代码，请点击申请业务关系代码，登记信息，我们将安排专人办理。申请业务关系代码后按照协议类型结算费用，不再享受级分类服务。 </p>
        </div>

        <toast v-model="showToast" type="warn" position="default" :time="2000">{{showToastText}}</toast>
    </div>
</template>

<script>
import { XHeader, Group, Cell, XButton, XInput, XSwitch, Selector, Toast } from "vux";
import { Mutations, RouteUrl, StrLenth } from "src/common/const";
import { RequestUrl } from "src/common/url";
import { mapState, mapActions } from "vuex";
export default {
    components: { XHeader, Group, Cell, XButton, XInput, XSwitch, Selector, Toast },
    computed: mapState(["isWeChar", "user", "shop"]),
    data() {
        return {
            StrLenth: {}, //字符长度常量
            showToast: false, //提示信息
            showToastText: "", //提示信息
            applyType: "",//默认申请类型
            listAapplyType: [
                { key: "1", value: "我是保险中介机构" },
                { key: "2", value: "我是代理人" },
                { key: "3", value: "我是非保险机构" }
            ],//申请类型列表
            residentArea: "",//选中的常驻地区
        };
    },
    // watch: {
    //     residentArea(cur, old) {
    //         debugger
    //         console.log("cur=" + cur + ",old=" + old);
    //     },
    // },
    methods: {
        goBack() {
            this.$common.goBack(this);
        },
        //常驻地区选项更改事件
        onChangeSelector() {
            //过滤无效选项的key值
            this.shop.hotAreaList = this.$common.filterSelect(this.residentArea, this.shop.hotAreaList);
        },
        //提交表单
        subForm() {
            let data = {
                TYPE: "FORM",
                userCode: this.user.userDto.userCode,
                applyType: this.applyType,
                areaId: this.residentArea.id,
                areaCode: this.residentArea.areaCode
            };
            if (this.$common.isEmpty(data.applyType)) {
                this.showToastText = "请选择申请类型"; this.showToast = true; return;//显示错误信息
            }
            if (this.$common.isEmpty(data.areaId) || this.$common.isEmpty(data.areaCode)) {
                this.showToastText = "请选择常驻地区"; this.showToast = true; return;//显示错误信息
            }
            let _this = this;
            _this.$common.storeCommit(_this, Mutations.UPDATE_LOADING_STATUS, true);
            _this.$http.post(RequestUrl.APPLY_AGREEMENT_NO, data).then(function (res) {
                _this.$common.storeCommit(_this, Mutations.UPDATE_LOADING_STATUS, false);
                if (res.state != 0) {
                    _this.showToastText = res.result; _this.showToast = true; return;//显示错误信息
                }
                _this.$common.storeCommit(_this, Mutations.SAVE_USER_INFO, res.result);//保存USER_INFO信息
                let data = {
                    _this: _this,
                    msgData: {
                        headerTitle: "信息提示",
                        gaBackUrl: RouteUrl.INDEX,
                        buttonUrl: RouteUrl.INDEX,
                        title: "申请成功",
                        description: "我们会在 2 个工作日内联系您办理相关手续。",
                        buttonsType: "primary",
                        buttonsText: "返回首页",
                    }
                }
                _this.$common.storeCommit(_this, Mutations.SET_MSG_DATA, data);
            });
        },
        //初始化当前页面信息
        initPage() {
            if (!this.user.isLogin) {
                this.$common.goUrl(this, RouteUrl.LOGIN);
            }
            document.title = "申请业务关系代码";
            this.StrLenth = StrLenth; //字符长度常量
            if (this.$common.isEmpty(this.shop.hotAreaList) || this.shop.hotAreaList.length < 1) {
                //查询所有常驻地区
                this.$common.storeCommit(this, Mutations.GET_ALL_HOT_AREA, this);
            }
        },
    },
    mounted() {
        this.$init.subPageInit(this);
        //初始化当前页面信息
        this.initPage();
    },
}
</script>

<style lang="scss" >
.applyAgrNo {
  //头部
  .row_up {
    width: 95%;
    margin: 15px auto;
    height: auto;
    border-radius: 5px;
    background-color: white;
    .weui-cell {
      border-top: 1px solid #efefef;
    }
    .weui-cell:before {
      border-top: 0px;
    }
    //申请类型列表
    .selects {
      display: block;
      height: 60px;
      line-height: 60px;
      border: 0px;
    }
    //常驻地区
    .row_up_area {
      width: 100%;
      height: 60px;
      border-radius: 5px;
      background-color: white;
      img {
        display: block;
        width: 20px;
        height: 20px;
        float: left;
        padding: 20px 0px 0px 15px;
      }
      //选择常驻地区说明
      .remarks {
        display: block;
        float: left;
        width: 70%;
        height: 50px;
        line-height: 21px;
        font-size: 12px;
        padding: 10px 0px 0px 15px;
        color: #999;
        .title {
          color: gray;
          font-size: 15px;
        }
      }
      //常驻地区列表
      .areaSelects {
        position: absolute;
        display: block;
        float: right;
        width: 95%;
        height: 60px;
        line-height: 60px;
        border: 0px;
        // .weui-cell__bd {
        //   .weui-select {
        //     color: blue;
        //   }
        // }
        // option {
        //   color: black;
        // }
      }
    }
  }
  //提交按钮
  .row_submit {
    margin: 15px auto;
    width: 95%;
  }
  //申请业务关系代码说明
  .row_applyAgrNo_remarks {
    margin: 15px auto;
    width: 90%;
    padding: 10px;
    background-color: white;
    border-radius: 5px;
    font-size: 14px;
    h4 {
      color: black;
      padding: 5px 0px 10px 0px;
    }
    p {
      color: gray;
    }
  }
}
</style>
